<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css" />
	</head>

	<body>
		<div id="header"></div>
		<div class="bg">
			
					<div class="banner">
					</div>
			
			<div class="container">
				<div class="container2">
					
				
				<div class="header fl">
					<div class="phoneLogin fl">
						<a href="#">手机号登陆</a>
					</div>
					<div class="line fl">

					</div>
					<div class="emailLogin fl">
						<a href="#">邮箱登陆</a>
					</div>
					<div class="clear">

					</div>

				</div>
				<div class="clear">

				</div>
				<div class="part1">

					<div class="passwordLogin">
						<div class="password">
							<a href="#">使用密码验证登陆</a>
						</div>
					</div>
					<form action="" class="registerform">

						<div class="input_box">
							<div class="left fl">
								<img src="img/img-24.png" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="text" class="num" name="" id="" placeholder="请输入手机号" value="" datatype=" /^0?(13|14|15|17|18|19)[0-9]{9}$/" nullmsg="请输入手机号" errormsg="手机号格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="jigsaw">
							<div class="right fl">
								<img src="img/img-19.png" />
							</div>
							<div class="text fl">
								向右滑动滑块填充拼图
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="code">
							<input type="tel" class="fl" maxlength="6" placeholder="请输入短信验证码" name="phonecode" data-max-length="6">
							<div class="getcode fl">
								<a href="javascript:void(0);" class="tabfocus getsmscode" id="auto-id-1535009757627">获取验证码</a>
							</div>
							<div class="code_img">
								<img src="img/img-142.jpg"/>
								<span>换一张</span>
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
					</form>
					<a href="personal-center.html">
					<div class="login_box">
						<a id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus login_box1" href="personal-center.html">登 录</a>
					</div>
					</a>
					<div class="foot">
						<div class="first_img fl">
							<a href=""><img src="img/img-20.png" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img src="img/img-21.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-22.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-23.png" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" target="_blank" href="#">遇到问题？</a>
						</div>
						<div class="txt rl location">

							<a class="u-regbtn bgcolor tabfocus" target="_self" href="register.html">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				<div class="part2">
					<div class="box">
						<form action="" class="registerform">

							<div class="input_box2">
								<div class="left fl">
									<img src="img/img-25.png" />
								</div>

								<div class="line2 fl">

								</div>
								<div class="tel fl">
									<input class="ema" type="text" name="" id="" placeholder="邮箱账号" value="" datatype="e" nullmsg="请输入账号" errormsg="账号格式错误" />
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="input_box3">
								<div class="left fl">
									<img src="img/img-26.png" />
								</div>

								<div class="line2 fl">

								</div>
								<div class="tel fl">
									<input type="text" class="pass" name="" id="" placeholder="请输入密码" value="" datatype="*6-15" id="passwordold" name="password" nullmsg="请输入密码" errormsg="密码错误" />
								</div>
								<div class="clear">

								</div>
							</div>
					</div>
					<div class="Validform_checktip"></div>
					</form>
					<a href="personal-center.html">
					<div class="login_box">
						<a id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus login_box2" href="personal-center.html">登 录</a>
					</div>
					</a>
					<div class="foot">
						<div class="first_img fl">
							<a href=""><img src="img/img-20.png" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img src="img/img-21.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-22.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-23.png" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" target="_blank" href="#">遇到问题？</a>
						</div>
						<div class="txt rl">
							<a class="u-regbtn bgcolor tabfocus" target="_self" href="register.html">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				<div class="part3">
					<form action="" class="registerform">
						<div class="noteLogin">
							<div class="note">
								<a href="#">短信快捷登陆</a>
							</div>
						</div>
						<div class="input_box">
							<div class="left fl">
								<img src="img/img-24.png" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="text" class="num" name="" id="" placeholder="请输入手机号" value="" datatype=" /^0?(13|14|15|17|18|19)[0-9]{9}$/" nullmsg="请输入手机号" errormsg="手机号格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="input_box3">
							<div class="left3 fl">
								<img src="img/img-26.png" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="text" class="pass" name="" id="" placeholder="请输入密码" value="" datatype="*6-15" id="passwordold" name="password" nullmsg="请输入密码" errormsg="密码错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
					</form>
					<a href="personal-center.html">
					<div class="login_box">
						<a id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus  login_box3" href="personal-center.html">登 录</a>
					</div>
					</a>
					<div class="foot">
						<div class="first_img fl">
							<a href=""><img src="img/img-20.png" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img src="img/img-21.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-22.png" /></a>
						</div>
						<div class="image fl">
							<a href=""><img src="img/img-23.png" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" href="#">遇到问题？</a>
						</div>
						<div class="txt rl">
							<a class="u-regbtn bgcolor tabfocus" target="_self" href="register.html">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				</div>
			</div>
			
		</div>
		<div id="footer"></div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/head-foot.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("form").Validform({
				tiptype: 3,

			});

			$(".phoneLogin a").click(function() {
				$(this).css("color","#333");
				$(".emailLogin a").css("color","#999");
				$(".part3").css("display", "none");
				$(".part2").css("display", "none");
				$(".part1").css("display", "block");

			})
			$(".emailLogin a").click(function() {
				$(this).css("color","#333");
				$(".phoneLogin a").css("color","#999");
				$(".part3").css("display", "none");
				$(".part1").css("display", "none");
				$(".part2").css("display", "block");

			})
			$(".password a").click(function() {
				$(".part2").css("display", "none");
				$(".part1").css("display", "none");
				$(".part3").css("display", "block");

			})
			$(".note a").click(function() {
				$(".part3").css("display", "none");
				$(".part1").css("display", "none");
				$(".part1").css("display", "block");

			})
			$(".password a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})

			$(".note a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})

			$(".txt a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".txt2 a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".foot a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#999999")
			})

			$(".num").change(function() {

				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag = reg.test($(".num").val());
				if(flag) {
					$(".input_box").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box").css("border", "1px solid red");
				}

			})
			$(".ema").change(function() {

				var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				var flag = reg.test($(".ema").val());
				if(flag) {
					$(".input_box2").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box2").css("border", "1px solid red");
				}

			})
			$(".pass").change(function() {

				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag = reg.test($(".pass").val());
				if(flag) {
					$(".input_box3").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box3").css("border", "1px solid red");
				}

			})
			
			$(".login_box1").click(function (e) {
				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag = reg.test($(".num").val());
				if (flag) {
					$(".input_box").css("border", "1px solid #e8e8e8");
					window.location.href="personal-center.html";
					
				} else{
					e.preventDefault();
					$(".input_box").css("border", "1px solid red");
					
				}
			})
			$(".login_box2").click(function (e) {
				var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				var flag1 = reg.test($(".ema").val());
				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag2 = reg.test($(".pass").val());
				
				if (flag1&&flag2) {
					$(".input_box2").css("border", "1px solid #e8e8e8");
					$(".input_box3").css("border", "1px solid #e8e8e8");
					window.location.href="personal-center.html";
					
				} else{
					e.preventDefault();
						$(".input_box2").css("border", "1px solid red");
					$(".input_box3").css("border", "1px solid red");
				}
			})
			$(".getsmscode").click(function () {
				$(".code_img img").css("display","block");
				$(".code_img span").css("display","block");
			})
		</script>
	</body>

</html>